<template>
  <div class="container">
    <common-header :title="title"></common-header>
    <!-- tab栏 -->
    <tab :cityData="cityData"></tab>
    <!-- 滚动区域 -->
    <list-scroll-wrapper></list-scroll-wrapper>
  </div>
</template>

<script>
import CommonHeader from '@/components/Header/Common.vue'
import ListScrollWrapper from '@/components/ScrollWrapper/List.vue'
import { mapState } from 'vuex'
import fieldData from '@/assets/data/fields.js'
import Tab from '@/components/Tab/index.vue'
import cityData from '@/assets/data/cities.js'

export default {
  name: 'List',
  data() {
    return {
      cityData,
    }
  },
  components: {
    CommonHeader,
    ListScrollWrapper,
    Tab
  },
  computed: {
    ...mapState(['field']),
    title: {
      get () {
        return fieldData.filter(item => 
        item.field === this.field)[0].iconText + '列表';
      },
      set () {}
    }
  }
}
</script>

<style lang='scss' scoped>
.container {
  height: 100%;
}
</style>